<script setup>
import { ref, onMounted } from 'vue';
const inp = ref(null);

const props = defineProps({
  defaultValue: String,
  value: String, // 如果想双向绑定得在emits中接update:xxx
});

const emit = defineEmits([
  'update:value',
]);

onMounted(() => {
  inp.value.value = props.defaultValue;
});

function onChange (e) {
  emit('update:value', e.target.value);
}
</script>

<template>
  <slot name="prefix" />
  <input
    type="text"
    ref="inp"
    :value="props.value"
    @input="onChange"
  >
  <slot name="suffix" />
</template>
